<template>
  <WaterMark content="Airle Admin">
    <ProLayout
      v-bind="state"
      :layout="settings.layout"
      :nav-theme="settings.navTheme"
      :locale="i18nRender"
      :is-mobile="state.isMobile"
      :fix-siderbar="settings.fixSiderbar"
      :fixed-header="settings.fixedHeader"
      :menu="settings.menu"
      content-width="Fixed"
      primary-color="#1890ff"
      :content-style="{ minHeight: '300px'}"
      :sider-width="state.sideWidth"
      :split-menus="state.splitMenus"
      :menu-data="menuData"
      :collapsed="state.collapsed"
      :open-keys="state.openKeys"
      :selected-keys="state.selectedKeys"
      :on-open-keys="$event => {state.openKeys = $event;}"
      :on-select="updateSelectedMenu"
      :breadcrumb="{
        routes: breadcrumb,
      }"

      @update:collapsed="( collapsed) => {state.collapsed = collapsed;}"
    >
      <template #rightContentRender>
        <right-content :top-menu="settings.layout === 'top'" :is-mobile="false" :theme="settings.navTheme" />
      </template>

      <template #headerRender>
        <div> ssssssssssssssssssss</div>
      </template>

      <template #menuHeaderRender>
        <a>
          <img src="https://gw.alipayobjects.com/zos/antfincdn/PmY%24TNNDBI/logo.svg">
          <h1 v-if="!(state.collapsed && state.layout !== 'mix')">Airle Admin</h1>
        </a>
      </template>
      <template #menuItemRender="{item}">
        <a-menu-item :key="item.path">
          <router-link :to="{ ...item.meta, path: item.path }">
            <SmileOutlined />
            <span class="custom-menu-item">{{ i18nRender(`${item.meta.title}`) }}</span>
          </router-link>
        </a-menu-item>
      </template>
      <!--      eslint-disable-next-line -->
      <template #breadcrumbRender="{ route, params, routes, paths}">

        <span v-if="routes.indexOf(route) === routes.length-1">  {{ i18nRender(route.breadcrumbName) }}</span>
        <RouterLink v-else :to="{ path: route.path }">
          {{ i18nRender(route.breadcrumbName) }}
        </RouterLink>
      </template>

      <router-view />
    </ProLayout>
    <SettingDrawer :setting="settings" @change="handleSettingChange" />
  </WaterMark>
</template>

<script>
    import { FooterToolbar, WaterMark } from '@ant-design-vue/pro-layout'
    import { computed, defineComponent, onMounted, reactive, ref, watch, watchEffect } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    import { getMenuData } from '@ant-design-vue/pro-layout/es/utils/getMenuData'
    import SettingDrawer from '../components/SettingDrawer/SettingDrawer'
    import { i18nRender } from '@/locales'
    import { SmileOutlined, UserOutlined } from '@ant-design/icons-vue'
    import defaultSettings from '@/config/defaultSettings'
    import RightContent from '../components/GlobalHeader/RightContent'

    export default defineComponent({
        components: { RightContent, WaterMark, FooterToolbar, SettingDrawer, UserOutlined, SmileOutlined },
        setup() {
            const { getRoutes } = useRouter()
            const route = useRoute()

            const { menuData } = getMenuData(getRoutes())
            const breadcrumb = computed(() =>
                route.matched.concat().map(item => {
                    return { path: item.path, breadcrumbName: item.meta.title }
                })
            )
            const settings = reactive({ ...defaultSettings })
            const state = reactive({
                collapsed: false,
                setting: settings,
                openKeys: ['/dashboard'],
                selectedKeys: ['/welcome'],
                isMobile: false,
                menuData: [],
                sideWidth: 208,
                hasSideMenu: true,
                hasHeader: true,
                hasFooterToolbar: false,
                setHasFooterToolbar: has => (state.hasFooterToolbar = has)
            })
            const updateSelectedMenu = () => {
                const matched = route.matched.concat().map(item => item.path)
                matched.shift()
                state.selectedKeys = matched
            }
            const updateOpenKeys = () => {
                 state.openKeys = (settings.layout === 'side' || settings.layout === 'mix') && route.matched.concat().map(item => item.path)
            }
            const handleSettingChange = ({ type, value }) => {
                console.log('type', type, value)
                type && (settings[type] = value)
                switch (type) {
                    case 'contentWidth':
                        settings[type] = value
                        break
                    case 'layout':
                        if (value === 'side') {
                            settings.contentWidth = 'Fluid'
                        } else {
                            settings.fixSiderbar = false
                            settings.contentWidth = 'Fixed'
                        }
                        break
                }
            }
            onMounted(() => {
                // if sider collapsed, set openKeys is null.
                const cacheOpenKeys = ref/* < string[] > */([])
                watch(
                    () => state.collapsed,
                    (collapsed) => {
                        if (collapsed) {
                            cacheOpenKeys.value = state.openKeys
                            state.openKeys = []
                        } else {
                            state.openKeys = cacheOpenKeys.value
                        }
                    }
                )

                // watch route
                watchEffect(() => {
                    updateSelectedMenu()
                    updateOpenKeys()
                })
            })

            return {
                settings,
                state, menuData, updateSelectedMenu, breadcrumb, i18nRender, handleSettingChange
            }
        }
    })
</script>

<style lang="less">
  @import "./BasicLayout.less";
</style>

